<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<link href="lib/view.css" rel="stylesheet" />

<link href="lib/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="lib/font-awesome/4.7.0/css/font-awesome.min.css"
	rel="stylesheet" />
<script src="lib/jquery/3.1.1/jquery.min.js"></script>
<script src="lib/echarts.min.js"></script>

<script src="lib/control.js"></script>

</head>

<body>
	<div class="container font"
		style="background-color: #33b5e5; width: 100%; height: 200px; ">
		<p style="margin-top:80px;text-align:center">密码破解示例</p>
	</div>
	<div class="blank" style="min-height:47px"></div>
	<div class="container" style="width:50%;border:;text-align:center;padding-top:20px">
	  <div class="box" id="form-signin">
	    <p>Sign in</p>
	    <form name="form-compare" class="form-horizontal" role="form" action="index.html">
			<div class="form-group">
				<label class="col-sm-2 control-label">User:</label>
    			<div class="col-sm-10">
					<input name="eg-user" type="text" class="form-control" placeholder="your name..." id="eg-user"/>
    			</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">Password:</label>
    			<div class="col-sm-10">
					<input name="eg-password" type="text" class="form-control" placeholder="your password..." id="eg-password"/>
    				<span class="help-block">tip：密码仅支持数字</span>
    			</div>
			</div>
			<button id="eg-signin" class="btn btn-primary" type="button">Sign in</button>
			<button id="eg-signup" class="btn btn-primary" type="button">Sign up</button>
			<button id="decode" class="btn btn-primary" type="button">Decode</button>
		</form>
		<div id="info" style="color:red;margin-top:20px"></div>
	  </div>
	  
	  <!-- Sign up page -->
	  <div class="box" id="form-signup" style="display:none">
	    <p>Sign up</p>
	    <form name="form-compare" class="form-horizontal" role="form" action="Register">
			<div class="form-group">
				<label class="col-sm-2 control-label">User:</label>
    			<div class="col-sm-10">
					<input name="eg-reg-user" type="text" class="form-control" placeholder="your name..." id="eg-reg-user"/>
    			</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">Password:</label>
    			<div class="col-sm-10">
					<input name="eg-reg-password" type="text" class="form-control" placeholder="your password..." id="eg-reg-password"/>
    			</div>
			</div>
			<button id="eg-register" class="btn btn-primary" type="button">Register</button>
			<button id="eg-back" class="btn btn-primary" type="button">Back</button>
		</form>
	  </div>
	  
	  <!-- Sign in success page -->
	  <div class="box" id="login-success" style="display:none">
	  	<div class="table-responsive" style="">
  			<table class="table">
    			<caption style="text-align:center">Hello!</caption>
    			<tbody>
      				<tr>
        				<td>User:</td>
        				<td id="show-user"></td>
      				</tr>
      				<tr>
        				<td>Password:</td>
        				<td id="show-password"></td>
      				</tr>
    			</tbody>
  			</table>
  			<button id="eg-close" class="btn btn-primary" type="button">Close</button>
		</div>
	  </div>
	  
	  <!-- Sign error page -->
	  <div class="box" id="login-error" style="display:none">
	  
	  </div>
	  
	</div>
	<div class="blank"></div>
	<div class="footer"></div>
	<script>
	$(document).ready(function(){
		$("#eg-signup").click(function(){
			$("#form-signin").hide();
			$("#form-signup").show();
		});
		$("#eg-back").click(function(){
			$("#form-signin").show();
			$("#form-signup").hide();
		});
		$("#eg-close").click(function(){
			$("#form-signin").show();
			$("#login-success").hide();
		});
		$("#eg-register").click(function(){
			$("#form-signup").hide();
			$("#login-success").show();
			$("#show-user").text($("#eg-reg-user").val());
			$("#show-password").text($("#eg-reg-password").val());
			$.get("Register",{"username":$("#eg-reg-user").val(),"password":$("#eg-reg-password").val()},function(data,status){
			});
		});
		$("#eg-signin").click(function(){
			$.get("Signin",{"username":$("#eg-user").val(),"password":$("#eg-password").val()},function(data,status){
				var obj = JSON.parse(data);
				var username = obj["username"];
				if(username == "success"){
					$("#form-signin").hide();
					$("#login-success").show();
					$("#show-user").text($("#eg-user").val());
					$("#show-password").text($("#eg-password").val());
				}else if(username == "error"){
					$("#info").text("Password error!");
				}else if(username == "nil"){
					$("#info").text("Can't find user!");
				}
			});
		});
		$("#decode").click(function(){
			$.get("Decode",{"username":$("#eg-user").val()},function(data,status){
				var obj = JSON.parse(data);
				$("#info").text("Decoding...");
				$("#info").text("password:"+obj["password"]);
			});
		});
	});
	</script>
	
<!--  
	<nav class="navbar navbar-inverse navbar-fixed-bottom"
		role="navigation">
		<div class="navbar-header">
			<a class="navbar-brand" href="#">anhuidaxue</a>
		</div>
		<div>
			<ul class="nav navbar-nav">
				<li><a id="date"></a></li>
			</ul>
		</div>
	</nav>
-->
</body>
</html>
